<!-- 弹窗 -->
<template>
    <div class="popup-window">
        <div
            :style="{
                opacity: element.eles.customFeature.maskOpacity,
                backgroundColor: element.eles.customFeature.maskBackgroundColor
            }"
            class="popup-window-mask"
        ></div>
        <!-- @click.stop="element.eles.customFeature.widgetHidden = true" -->
        <div
            :style="{
                float: element.eles.customFeature.direction
            }"
            class="popup-window-content-wrap"
        >
            <div
                ref="widgetDomWrapRef"
                :style="{
                    width: element.eles.style.width,
                    height: element.eles.style.height,
                    marginTop: element.eles.style['margin-top'],
                    marginLeft: element.eles.style['margin-left'],
                    marginRight: element.eles.style['margin-right'],
                    backgroundColor: element.eles.style['background-color']
                }"
                class="popup-window-content"
            >
                <widget-view-free-vessel
                    ref="widgetDomRef"
                    v-model="widgetList"
                    :widget-data="element"
                    :disabled="draggableDisabled"
                    :custom-class="[]"
                    :custom-style="{
                        width: element.eles.style.width,
                        height: element.eles.style.height
                    }"
                    :preview="preview"
                    placeholder="拖拽组件到弹窗"
                    disabled-placeholder="不可放置"
                >
                    <widget-view-resizable
                        v-if="!preview"
                        :element="element"
                        :width="widgetWidth"
                        :height="widgetHeight"
                        :max-width="320"
                        :resizable="{
                            left: false,
                            top: false,
                            width: true,
                            height: true
                        }"
                        @move="onResizableMove"
                        @end="onResizableEnd"
                    />
                </widget-view-free-vessel>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, computed } from 'vue'
import useWidgetDraggable from '@/libs/edit/widgetDraggable'
import whiteList from './white-list'
import WidgetViewFreeVessel from '../../widget-view-free-vessel'
import WidgetViewResizable from '../../widget-view-resizable'
export default defineComponent({
    name: 'WidgetPopupWindow',
    components: {
        WidgetViewFreeVessel,
        WidgetViewResizable
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        },
        // 预览模式
        preview: {
            type: Boolean,
            default: false
        }
    },
    setup(props, { emit }) {
        const { element, preview } = toRefs(props)

        const {
            draggableWidgetType
        } = useWidgetDraggable()

        const widgetDomWrapRef = ref(null)
        const widgetDomRef = ref(null)

        const widgetList = computed(() => element.value?.eles?.content || [])

        const draggableDisabled = computed(() => {
            return !!draggableWidgetType.value && !whiteList.includes(draggableWidgetType.value)
        })

        const widgetWidth = computed({
            get: () => parseInt(element.value.eles.style.width),
            set: val => element.value.eles.style.width = val + 'px'
        })

        const widgetHeight = computed({
            get: () => parseInt(element.value.eles.style.height),
            set: val => element.value.eles.style.height = val + 'px'
        })

        // 拖动调整控件大小时触发
        const onResizableMove = data => {
            const { width, height } = data
            widgetDomWrapRef.value.style.cssText += `width:${width}px;height:${height}px;`
            widgetDomRef.value.widgetDomRef.style.cssText += `width:${width}px;height:${height}px;`
        }
        // 结束调整控件大小时触发
        const onResizableEnd = data => {
            const { width, height } = data
            widgetWidth.value = width
            widgetHeight.value = height
        }
        
        return {
            element,
            preview,

            draggableWidgetType,
            draggableDisabled,

            widgetDomWrapRef,
            widgetDomRef,

            widgetList,
            widgetWidth,
            widgetHeight,

            onResizableMove,
            onResizableEnd
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-popup-window.less';
</style>